<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

// import { usePublicHooks } from "./hooks";
// import { baseUrl } from "@/utils/http";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    parentId: null,
    title: "",
    type: 0,
    name: "",
    sort: null,
    path: "",
    visible: 0,
    status: 0,
    perms: "",
    icon: "",
    remark: "",
    menuOptions: [],
    parentMenuOptions: []
  })
});

const ruleFormRef = ref();
// const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

const typeRadio = ref(newFormInline.value.type);

function radioChangeHandel(val: number) {
  newFormInline.value.type = val;
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div>
    <el-form ref="typeForm" label-width="80px">
      <el-row :gutter="30">
        <re-col>
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="typeRadio" @change="radioChangeHandel">
              <el-radio-button :label="0">菜单</el-radio-button>
              <el-radio-button :label="1">目录</el-radio-button>
              <el-radio-button :label="10">权限</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </re-col>
        <re-col v-if="typeRadio != 0">
          <el-form-item label="上级菜单">
            <el-tree-select
              v-model="newFormInline.parentId"
              :data="
                typeRadio == 10
                  ? newFormInline.menuOptions
                  : newFormInline.parentMenuOptions
              "
              :render-after-expand="false"
            />
          </el-form-item>
        </re-col>
      </el-row>
    </el-form>

    <div class="content">
      <el-form
        ref="ruleFormRef"
        :model="newFormInline"
        :rules="formRules"
        label-width="80px"
      >
        <el-row :gutter="30">
          <re-col>
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="newFormInline.title"
                clearable
                placeholder="请输入标题"
              />
            </el-form-item>
          </re-col>

          <re-col>
            <el-form-item label="路径" prop="path" v-if="typeRadio != 10">
              <el-input
                v-model="newFormInline.path"
                clearable
                placeholder="请输入路径"
              />
            </el-form-item>
          </re-col>

          <re-col :value="12" :xs="24" :sm="24" v-if="typeRadio == 1">
            <el-form-item label="组件名" prop="name">
              <el-input
                v-model="newFormInline.name"
                clearable
                placeholder="请输入组件名"
              />
            </el-form-item>
          </re-col>

          <re-col :value="12" :xs="24" :sm="24" v-if="typeRadio == 10">
            <el-form-item label="权限" prop="perms">
              <el-input
                v-model="newFormInline.perms"
                clearable
                placeholder="请输入权限"
              />
            </el-form-item>
          </re-col>

          <re-col :value="12" :xs="24" :sm="24" v-if="typeRadio == 0">
            <el-form-item label="排序" prop="sort">
              <el-input
                v-model="newFormInline.sort"
                clearable
                placeholder="请输入排序"
              />
            </el-form-item>
          </re-col>

          <re-col :value="12" :xs="24" :sm="24" v-if="typeRadio != 10">
            <el-form-item label="图标" prop="icon">
              <el-input
                v-model="newFormInline.icon"
                clearable
                placeholder="请输入路径"
              />
            </el-form-item>
          </re-col>
          <re-col>
            <el-form-item label="描述" prop="remark">
              <el-input
                v-model="newFormInline.remark"
                clearable
                placeholder="请输入描述"
                maxlength="30"
                show-word-limit
                type="textarea"
              />
            </el-form-item>
          </re-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.content {
  padding-top: 20px;
  border-top: 2px solid #ebeef5;
}
</style>
